<!-- 登录 -->
<script setup>
import {reactive, ref} from "vue";
import { UserFilled, Lock } from "@element-plus/icons-vue";
import {onLogin} from "@/api/user";
import {userInfoStore} from "@/pinia/user";
import {useRouter} from "vue-router";
import {ElMessage, ElMessageBox} from "element-plus";
import ParticlesBackground from "@/components/ParticlesBackground/index.vue";

const router = useRouter()

const userInfo = userInfoStore()

const ruleForm = ref({
 username: '',
 passwd: userInfo.getPs || ''
})

// 是否记住密码
const rememberPass = ref(!!userInfo.getPs)

const rule = ref(null)

// 校验规则
const rules = reactive({
 username: [{required: true, message: '请输入用户名', trigger: 'blur'}],
 passwd: [{required: true, message: '请输入密码', trigger: 'blur'}]
})

// 提交表单
const onSubmit = async (formEl) => {
 if (!formEl) return

 await formEl.validate((valid, fields) => {
  if (!valid) return

  loading.value = true

  Promise.try(async () => {
   const res = await onLogin(ruleForm.value)

   userInfo.handleToken(res.data)
   await router.push('/futures')
  }).catch(e => {

  })

  loading.value = false

  console.log('提交成功')
 })
}

const loading = ref(false)

const isPass = (e) => {
 userInfo.handlePs(ruleForm.value.passwd)
}

const clearStock = () => {
 ElMessageBox.confirm('是否清空股票缓存记录', '提示', {
  cancelButtonText: '取消',
  confirmButtonText: '确认'
 }).then(res => {
  ElMessage.success('清空成功')
 }).catch(err => {})
}
</script>

<template>
 <div class="container flex" v-loading="loading">
  <ParticlesBackground />
  <section class="from flex">
   <img class="logo" src="../../assets/image/sign_logo.png" alt="GLS">

   <el-form ref="rule" :rules="rules" :model="ruleForm" @keyup.enter.native="onSubmit(rule)">
    <el-form-item prop="username">
     <el-input v-model="ruleForm.username" :prefix-icon="UserFilled" placeholder="请输入用户名" />
    </el-form-item>

    <el-form-item prop="passwd" class="mb-20">
     <el-input type="password" v-model="ruleForm.passwd" :prefix-icon="Lock" placeholder="请输入密码" />
    </el-form-item>

    <el-form-item>
     <div class="flex handle">
      <el-checkbox v-model="rememberPass" @change="isPass">记住密码</el-checkbox>

      <el-link type="info" :underline="false" @click="clearStock">清空股票缓存</el-link>
     </div>
    </el-form-item>

    <el-form-item class="mb-0">
     <el-button type="primary" @click="onSubmit(rule)">登录</el-button>
    </el-form-item>
   </el-form>
  </section>

  <footer class="footer">GLS 投顾系统</footer>
 </div>
</template>

<style scoped lang="scss">
.container {
 background: {
  image: url("../../assets/image/login_bg.png");
  repeat: no-repeat;
  position: center center;
  size: cover;
 };
 flex-direction: column;

 .from {
  margin: auto;
  flex-direction: column;

  .logo {
   width: 218px;
   margin: 0 auto 60px;
  }

  .el-form {
   border-radius: 8px;
   width: 450px;
   padding: 80px 100px;
   background: {
    image: url("../../assets/image/sign_in_inner.png");
    repeat: no-repeat;
    position: center center;
    size: cover;
   }

   ::v-deep {
    .el-form-item {
     margin-bottom: 35px;

     &.mb-20 {
      margin-bottom: 25px;
     }
     &.mb-0 {
      margin-bottom: 0;
      margin-top: 60px;
     }
    }
   }

   .el-input {
    ::v-deep {
     .el-input__wrapper {
      background-color: transparent;
      border-radius: 0;
      box-shadow: none;
      border-bottom: 1px solid $border-color;
      padding-left: 0;
      padding-bottom: 16px;

      .el-input__inner {
       @include Font((color: $white, size: 16px))
      }
     }
     .el-input__prefix-inner {
      font-size: 28px;
      color: $form_icon_color;
     }
    }
   }

   .handle {
    width: 100%;
    justify-content: space-between;

    ::v-deep {
     .el-checkbox__label {
      @include Font((color: $default_color, size: 14px))
     }
     .is-checked {
      &~.el-checkbox__label {
       @include Font((color: $active_color))
      }
     }
     .el-link__inner {
      @include Font((size: 14px))
     }
    }
   }

   .el-button {
    width: 300px;
    border-radius: 50px;
    height: 48px;
    margin: auto;
   }
  }
 }
}

.footer {
 text-align: center;
 @include Font((color: #fff, size: 18px));
 padding-bottom: 20px;
}
</style>